<template>
  <div class="integral-container">
    <!-- <div class="integral-top">
      <span>总贡献积分：3232332分</span>
    </div> -->
    <HHsearch
      ref="search"
      :search-options="searchOptions"
      :btn-option="2"
      @search="search"
      @reset="reset"
      @export="handleExport"
    ></HHsearch>
    <HHtable
      ref="table"
      :border="true"
      :total="total"
      :table-column="tableColumn"
      :table-data="tableData"
      @page-click="pageClick"
    >
      <template #first="{ data }">
        <div class="flex-center">
          <span>{{ data.userName }}</span>
          <span>{{ data.cellPhone }}</span>
        </div>
      </template>
    </HHtable>
  </div>
</template>

<script>
  import HHsearch from '@/components/HH-search'
  import HHtable from '@/components/HH-table'
  import { splicingUrl } from '@/utils/validate'
  import { getIntegralList } from '@/api/integral'
  export default {
    components: {
      HHsearch,
      HHtable,
    },
    data() {
      return {
        total: 0,
        tableColumn: [
          {
            label: '分销员名称/手机号',
            slotContent: 'first',
          },
          {
            prop: 'remark',
            label: '事件',
            width: '500',
          },
          {
            prop: 'amount',
            label: '贡献积分',
          },
          {
            prop: 'createdate',
            label: '贡献时间',
          },
          {
            prop: 'dcName',
            label: '所属招生顾问',
          },
        ],
        tableData: [],
        searchOptions: [
          {
            type: 'text',
            prop: 'dcName',
            span: 6,
            label: '所属招顾：',
            placeholder: '选择或输入搜索',
          },
          {
            type: 'text',
            prop: 'userName',
            span: 6,
            label: '分销员名称：',
            placeholder: '选择或输入搜索',
          },
          {
            type: 'text',
            prop: 'cellPhone',
            label: '手机号：',
            span: 6,
            placeholder: '选择或输入搜索',
          },
          {
            type: 'text',
            prop: 'remark',
            label: '事件：',
            span: 6,
            placeholder: '选择或输入搜索',
          },
          {
            type: 'daterange',
            prop: 'daterange',
            label: '申请时间：',
            span: 8,
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期',
            valueFormat: 'yyyy-MM-dd',
          },
        ],
        params: {
          pageNumber: 1,
          pageSize: 10,
          queryCriteria: {
            cellPhone: '',
            dcName: '',
            endTime: '',
            remark: '',
            startTime: '',
            userName: '',
          },
        },
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      getList() {
        this.$refs.table.loading = true
        getIntegralList(this.params).then((res) => {
          if (res.code === 200) {
            this.total = res.data.total
            this.tableData = res.data.list
            setTimeout(() => {
              this.$refs.table.loading = false
            }, 1000)
          } else {
            this.$baseMessage(res.msg, 'error')
          }
        })
      },
      pageClick(pager) {
        this.params.pageNumber = pager
        this.getList()
      },
      search(res) {
        if (res.daterange) {
          res.startTime = res.daterange[0]
          res.endTime = res.daterange[1]
          delete res.daterange
        }
        const arr = Object.keys(res)
        for (let i = 0; i < arr.length; i++) {
          this.params.queryCriteria[arr[i]] = res[arr[i]]
        }
        this.getList()
      },
      reset() {
        this.params = {
          pageNumber: 1,
          pageSize: 10,
          queryCriteria: {
            cellPhone: '',
            dcName: '',
            endTime: '',
            remark: '',
            startTime: '',
            userName: '',
          },
        }
        this.$refs.search.removeFilterArray()
        this.getList()
      },
      handleExport(res) {
        const param = {
          userName: '',
          status: '',
          phone: '',
          startTime: '',
          endTime: '',
        }
        if (res.daterange) {
          param.startTime = res.daterange[0]
          param.endTime = res.daterange[1]
          delete res.daterange
        }
        const arr = Object.keys(param)
        for (let i = 0; i < arr.length; i++) {
          param[arr[i]] = res[arr[i]] || ''
        }
        let url = splicingUrl(param)
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = this.baseURL + '/accountDetail/export.do'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .flex-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .integral-top {
    margin: 20px 0;
    font-size: 14px;
    color: red;
    span {
      margin-right: 50px;
    }
  }
</style>
